<template>
	<div id='timetable'>
		<input v-model="event.name" placehodler="eventname">
		<input v-model="event.starttime" type='datetime-local' placehodler="eventstarttime">
		<input v-model="event.endtime" type='datetime-local' placehodler="eventendtime">
		<button v-on:click='createevent()'>tey</button>
		<p>{{ timenow }}</p>
		<ul id='totalevent'>
			<li v-for="(event,index) in events" :key="index">
				<button v-on:click='startrecord(index)'>{{ index }}</button>
				<p>{{ event.name }} {{ event.starttime }} {{ event.endtime }}</p>
			</li>
		</ul>
		<p> eventnow:</p>
		<ul id='totalevnetnow'>
			<li v-for="(event,index) in eventsnow" :key="index">
				{{ event.name }} {{ event.starttime }} {{ event.endtime }}
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'timetable',
	data : function (){
		return {
			//'eventname' : '',
			//'eventstarttime' : '',
			//'eventendtime' : '',
			'event' : {
				name: '',
				starttime : '',
				endtime: '',
			},
			'events':[],
			'record' : {
				name: '',
				starttime : '',
				endtime: '',
			},
			'records':[],
			'eventnow' : '',
			'recordnow' : '',
			'timenow' : new Date(),	
		}		
	},
	methods: {
		createevent: function (){
			this.events.push({
				name : this.event.name,
				starttime : this.event.starttime,
				endtime : this.event.endtime,
			});
			this.$options.methods.empty();
		},
		empty: function(){
			this.eventname = '';
			this.eventstarttime = '';
			this.eventendtime = '';
		},
		createrecord: (name = this.eventnow.name,
			starttime = this.timenow,
			endtime = '') => {
			this.records.push({
				name : name,
				starttime : starttime,
				endtime : endtime,
			});	
		},
		startrecord: function(index,iter){
			this.recordnow = iter[index]
			this.recordnow.starttime = new Date();
			this.recordnow.endtime = '';
		},
		stoprecord: function(){
			this.recordnow.endtime = new Date();
			this.record.push(this.recordnow);
			this.recordnow = '';
		},
		deleteevent: function () {
		},
		deleterecord: function (){
		},
		getthetotalevents: function (){
			return this.events;
		},
		getthetotalrecords: function (){
			return this.records;
		},
		updatethetimeofevent: (event, 
			starttime=event.starttime,
			endtime=event.endtime) => {
			event.starttime = starttime;
			event.endtime= endtime;		
		},
		updatethetimeofrecord: (record, 
			starttime=record.starttime,
			endtime=record.endtime) => {
			record.starttime = starttime;
			record.endtime= endtime;		
		},
	},
	computed: {
		eventsnow:function () {
			var result = [];
			for (let item of this.events){
				let start = Date.parse(item.starttime);
				let end = Date.parse(item.endtime);
				let time = Date.parse(this.timenow);
				if(start <= time && end >= time){
					result.push(item);
				}
			}
			return result;
		},
		eventscomming: function () {
			var result = [];
			for (let item in this.events){	
				let start = Date.parse(item.starttime);
				let time = Date.parse(this.timenow);
				if(start > time){
					result.push(item);
				}
			}
			return result;
		},
	},
	mounted(){
		this.timer = setInterval(() => {
			this.timenow = new Date()
		},1000)
	},
}
</script>

<style>
#timetable {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
